<template>
  <div>
    <basic-container>
      <curd-title :title="'基本信息'" />
      <avue-form ref="form" :option="option" v-model="form">
        <template slot="materialClassify">
          <material-classify v-model="form.materialClassify" :disabled="['view'].includes(type)"/>
        </template>
      </avue-form>
    </basic-container>
    <basic-container>
      <curd-title :title="'模版内容'" />
      <avue-crud
        :table-loading="loading"
        :option="templateOption"
        :data="data"
        :before-open="beforeOpen"
        v-model="templateForm"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @row-del="rowDel"
      >
        <template slot="principalForm">
          <leading v-model="templateForm.principal" />
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import CurdTitle from '@/components/base/title'
import { option, taskOption } from '@/option/tenant/supplier/audit-template-form'
import { getDeptTree, getDeptLazyTree } from '@/api/system/dept'
import { submit, detail } from '@/api/supplier/audittemplate'
import website from '@/config/website'
export default {
  name: 'TaskForm',
  props: ['type', 'templateType', 'params'],
  components: {
    CurdTitle
  },
  data() {
    return {
      form: {},
      templateForm: {},
      option: option.call(this),
      loading: false,
      templateOption: { ...taskOption.call(this), operatingButtons: this.getOperatingButtons },
      data: []
    }
  },
  mounted() {
    if (['edit', 'view'].includes(this.type)) {
      return this.getDetail(this.params.id)
    }
  },
  methods: {
    beforeOpen(done, type) {
      this.getDept()
      done()
    },
    getDetail(id) {
      detail(id).then(res => {
        console.log(res.data.data)
        res.data.data.materialClassify = res.data.data.materialClassify.split('/')
        this.form = res.data.data
        this.form.taskList.map(v => {
          v.contents = v.content.split('/')
        })
        this.templateType = this.form.templateType
        this.id = this.form.id
        this.data = this.form.taskList
      })
    },
    getDept() {
      getDeptTree(website.tenantId).then(res => {
        const column = this.findObject(this.templateOption.column, 'deptCode')
        column.dicData = res.data.data
      })
    },
    rowSave(row, done, loading) {
      this.data.push(Object.assign({}, { ...row, dept: row.$deptCode, content: row.contents.join('/') }))
      console.log(this.data)
      done()
    },
    rowUpdate(row, index, done) {
      done(Object.assign(row, { dept: row.$deptCode, content: row.contents.join('/') }))
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(row)
          this.data.splice(row.$index, 1)
        })
        .then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let data = {
            id: this.form.id || null,
            templateType: this.templateType,
            explanation: this.form.explanation,
            materialClassify: this.form.materialClassify.join('/'),
            taskList: this.data,
            indicatorList: []
          }
          // console.log(data)
          submit(data).then(res => {
            console.log(res)
            this.$emit('callback')
            this.$emit('update:visible', false)
          })
        }
      })
    }
  }
}
</script>

<style></style>
